<template>
  <div class="star-search">
    <div class="star-search-content">
      <div class="star-cell star-field star-search__field">
        <div class="star-field_left-icon">
          <van-icon name="search" size="18" />
        </div>
        <div class="star-field_value">
          <div class="star-field__body">
            <input
              v-model="localSearchValue"
              :placeholder="defaultPlaceholder"
              class="star-field__input"
              @input="handleInput"
              @focus="handleFocus"
              @blur="handleBlur"
              @keydown.enter="handleSearch"
            />
            <span id="customClearButton" class="custom-clear-icon" v-if="clearVisible" @click="handleClear">×</span>
          </div>
        </div>
        <div class="star-search_action">
          <slot name="action"></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { debounce } from 'lodash'
import { ref, computed } from 'vue'
const props = defineProps<{
  modelValue: string
  placeholder?: string
}>()
// 使用 localSearchValue 来处理内部状态
const localSearchValue = ref(props.modelValue || '')
const defaultPlaceholder = computed(() => {
  return props.placeholder || '请输入商家'
})
const emits = defineEmits<{
  (e: 'update:modelValue', value: string): void
  (e: 'search', value: string): void
  (e: 'clear'): void
}>()
const clearVisible = computed(() => {
  return localSearchValue.value !== ''
})
const debounceHandleInput = debounce((e: Event) => {
  const input = e.target as HTMLInputElement
  localSearchValue.value = input.value
  emits('update:modelValue', localSearchValue.value)
}, 1000)
const handleInput = (e: Event) => {
  debounceHandleInput(e)
}
const handleFocus = () => {}
const handleBlur = () => {}
const handleClear = () => {
  localSearchValue.value = ''
  emits('update:modelValue', localSearchValue.value)
  emits('clear')
}
const handleSearch = () => {
  console.log(localSearchValue.value)
  emits('search', localSearchValue.value)
}
</script>
<style scoped lang="scss">
:deep() {
  .van-icon {
    color: #666;
  }
}
.star-search {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: var(--star-search-padding);
  background: var(--star-search-background);
}
.star-search-content {
  padding-left: 10px;
  display: flex;
  flex: 1;
  background: var(--star-search-content-background);
  border-radius: 10px;
  .star-cell {
    width: 100%;
    line-height: 32px;
    color: #333;
    font-size: 12px;
    display: flex;
    box-sizing: border-box;
  }
  .star-field {
    flex-wrap: wrap;
  }
  .star-search__field {
    flex: 1;
    padding: 0 5px 0 0;
    align-items: center;
    background-color: transparent;
  }
}
.star-field_left-icon {
  color: #666;
  margin-right: 5px;
  display: flex;
  align-items: center;
}
.star-field_value {
  flex: 1;
  position: relative;
  overflow: visible;
  color: #666;
  font-size: 14px;
  text-align: right;
  vertical-align: middle;
  word-wrap: break-word;
}
.star-field__body {
  display: flex;
  align-items: center;
}
.star-field__input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #000;
  background-color: transparent;
  border: none;
}
.star-field__clear-btn {
  position: absolute;
  right: 5px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.star-field__clear-btn:hover {
  opacity: 0.8; // Hover effect for better UX
}
/* 隐藏原生清除按钮（适用于部分浏览器） */
input::-ms-clear,
input::-webkit-search-cancel-button {
  display: none;
}

/* 自定义清除图标样式 */
.custom-clear-icon {
  width: 1em;
  height: 1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px; /* 根据实际情况调整位置，使其靠近输入框右侧边缘 */
  color: #fff;
  background: #999;
  border-radius: 50%;
  user-select: none; /* 防止用户选中图标文本 */
}
.star-search_action {
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  width: 60px;
  font-size: 14px;
  text-align: center;
  background: #00aeec;
  border-radius: 20px;
  user-select: none;
  -webkit-user-select: none;
}
</style>
